<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
<!--
$(function(){
	$('#pp').portal({
		border:true,
		fit:true
	});
	for(var i=0; i<3; i++){
		var p = $('<div/>').appendTo('body');
		p.panel({
			title:'Title'+i,
			content:'<div style="padding:5px;">Content'+(i+1)+'</div>',
			height:100,
			closable:true,
			collapsible:true
		});
		$('#pp').portal('add', {
			panel:p,
			columnIndex:i
		});
	}
	$('#pp').portal('resize');
});
//-->
</script>

<div id="pp" style="position:relative">
	<div style="width:30%;">
		<div title="Clock" style="text-align:center;background:#f3eeaf;height:150px;padding:2px;">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">
		      <param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">
		      <param name=quality value=high>
		      <param name="wmode" value="transparent">
		      <embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
		    </object>
	    </div>
	    <div title="Tutorials" collapsible="true" closable="true" style="height:200px;padding:2px;">
	    	<div class="t-list"><a href="http://www.jeasyui.com/tutorial/datagrid/datagrid1.php">Build border layout for Web Pages</a></div>
	    	<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/panel.php">Complex layout on Panel</a></div>
	    	<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/accordion.php">Create Accordion</a></div>
	    	<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/tabs.php">Create Tabs</a></div>
	    	<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/tabs2.php">Dynamically add tabs</a></div>
	    	<div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/panel2.php">Create XP style left panel</a></div>
	    </div>
	</div>
	<div style="width:40%;">
		<div id="pgrid" title="DataGrid" closable="true" style="height:200px;">
			<table class="easyui-datagrid" style="width:650px;height:auto"
					fit="true" border="false"
					singleSelect="true"
					idField="itemid" url="datagrid_data.json">
				<thead>
					<tr>
						<th field="itemid" width="60">Item ID</th>
						<th field="productid" width="60">Product ID</th>
						<th field="listprice" width="80" align="right">List Price</th>
						<th field="unitcost" width="80" align="right">Unit Cost</th>
						<th field="attr1" width="120">Attribute</th>
						<th field="status" width="50" align="center">Status</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<div style="width:30%;">
		<div title="Searching" iconCls="icon-search" closable="true" style="height:80px;padding:10px;">
			<input class="easyui-searchbox">
		</div>
		<div title="Graph" closable="true" style="height:200px;text-align:center;">
			<img height="160" src="http://knol.google.com/k/-/-/3mudqpof935ww/ip4n5y/web-graph.png"></img>
		</div>
	</div>
</div>